<template>
	<uni-nav-bar title="关闭班次" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale">关闭本班次前请给车员确认分配比例</view>
	<view class="package_sale" v-if="userInfo.staffBanInfo">
		<view>{{userInfo.staffBanInfo.title}}</view>
		<view class="top" v-for="(item,index) in userInfo.staffBanInfo.staff_list" :key="index">
			{{item.staff_name}}（{{item.zhiwu}}）
		</view>
		<view class="top">总收益:{{userInfo.staffBanInfo.shouyi}}元</view>
		<view class="top">加注量:{{userInfo.staffBanInfo.amount}}公斤 </view>
		<view class="top">加注单:{{userInfo.staffBanInfo.nums}}单</view>
		<view class="space-between top" v-for="(item,index) in userInfo.staffBanInfo.staff_list" :key="index">
			<view>{{item.zhiwu}}收益：{{item.filling_shouyi}}</view>
			<view>{{item.zhiwu}}比例：{{item.bfb}}%</view>
		</view>
		<view class="space-between package_sale top" style="background: #F5F9FF;color: #558AF1;"
			v-if="userInfo.staffBanInfo&&userInfo.staffBanInfo.staff_list&&userInfo.staffBanInfo.staff_list.length>1">
			<view>车员收入比例调节</view>
			<picker-view :value="valueNum" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(index) in 41" :key="index">{{index+29}}%</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="top">
			<view>拍照</view>
			<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1" :sourceType="sourceType"/>
		</view>
		<view class="but" @click="submit()">确认关闭班次</view>
	</view>
	<Watermark ref="watermark" @selected="selected"></Watermark>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import Watermark from '@c/watermark.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { toPublish } from '@mqtt';
	import { showLoading, errorToast, successToast } from '@/utils/prompt';
	import { useUserInformation } from '@/stores/earthPushing/userSale';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const userInfo = useUserInformation();
	const banID = ref()
	const percentage1 = ref()
	const percentage2 = ref()
	const sourceType = ["camera"]
	onLoad((pearm) => {
		banID.value = Number(pearm.banId)
		userInfo.getStaffBan(banID.value);
		setTimeout(() => {
			if (userInfo.staffBanInfo && userInfo.staffBanInfo.staff_list && userInfo.staffBanInfo.staff_list.length > 1) {
				percentage1.value = userInfo.staffBanInfo.staff_list[0].bfb
				percentage2.value = userInfo.staffBanInfo.staff_list[1].bfb
			}
		}, 1000)
	})
	const valueNum = ref([0]);
	// 上传图片
	const imgList = ref([])
	const image = ref()
	const watermark = ref(null)
	// 上传图片
	function onChoose(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
	}
	function selected(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload2',
			filePath: e,
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				// 根据接口具体返回格式   赋值具体对应url
				imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
				image.value = JSON.parse(uploadFileRes.data).data.url
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	// 删除图片
	function onDelete() {
		imgList.value = []
		image.value = ''
	}

	/**
	  * 滑动
	  * @param {Object} e  滑动信息
	  */
	function bindChange(e : any) {
		console.log(e.detail.value)
		userInfo.staffBanInfo.staff_list[0].bfb = Number(percentage1.value) - Number(e.detail.value)
		userInfo.staffBanInfo.staff_list[1].bfb = Number(percentage2.value) + Number(e.detail.value)
		userInfo.staffBanInfo.staff_list[0].filling_shouyi = Math.round(((userInfo.staffBanInfo.shouyi * (userInfo.staffBanInfo.staff_list[0].bfb / 100))) * 100) / 100
		userInfo.staffBanInfo.staff_list[1].filling_shouyi = Math.round(((userInfo.staffBanInfo.shouyi - userInfo.staffBanInfo.staff_list[0].filling_shouyi)) * 100) / 100
	}
	// 关闭班次
	function submit() {
		if (!image.value) {
			errorToast('请上传图片')
			return
		}
		showLoading()
		const payload = {
			ban_id: banID.value,
			image: image.value,
		};
		toPublish('staff/closeStaffBan',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
					if (userInfo.staffBanInfo.staff_list.length > 1) {
						Allocation()
					}
					setTimeout(() => {
						userInfo.getUserInfo();
						uni.reLaunch({
							url: '/pages/Sale/index/module'
						});
					}, 1000)
				} else {
					errorToast(msg)
				}
			}
		);
	}
	//提交分配比例
	function Allocation() {
		showLoading()
		const payload = {
			ban_id: banID.value,
			staff_id,
			bfb: userInfo.staffBanInfo.staff_list[1].bfb / 100,
		};
		toPublish('staff/doBanBfbJiang',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
	}

	.but {
		width: 360rpx;
		height: 98rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 80rpx auto 30rpx;
	}
</style>
<style>
	.top>>>.mk-upload {
		padding: 0px;
	}

	.picker-view {
		width: 30%;
		height: 50px;
	}
</style>
<style>
	.picker-view>>>.uni-picker-view-indicator {
		height: 50px !important;
	}

	.picker-view>>>.uni-picker-view-content {
		text-align: center;
		line-height: 50px;
	}

	.picker-view>>>.uni-picker-view-indicator:before {
		border-top: 0px;
	}

	.picker-view>>>.uni-picker-view-indicator:after {
		border-bottom: 0px;
	}
</style>